import Vue from "vue"
import Vuex from 'vuex'

Vue.use(Vuex);

var state={
	count:10,
	headerShow:true,
	loadingShow:true,
	footerShow:true
};

const mutations={
	alert(state){
		alert(state.count);
	},
	showHeader:function(state){
		state.headerShow=true;
	},
	hideHeader:function(state){
		state.headerShow=false;
	},
	hideLoading(state){
		state.loadingShow=false;
	},
	showLoading(state){
		state.loadingShow=true;
	},
	hideFooter:function(state){
		state.footerShow=false;
	},
	showFooter:function(state){
		state.footerShow=true;
	}
};

//TODO:页面试讲的方法dispatcher到这里
const actions={
	alert:function({commit:commit}){
		commit("alert");
	},
	showHeader:({
		commit
	})=>{
		commit("showHeader");
	},
	hideHeader:function({commit:commit}){
		commit("hideHeader");
	},
	showLoading(context){  //自动注入的context对象类似store但不是store本身，这一点在多模块中更加明显，单模块看不出这个问题
		context.commit("showLoading");
	},
	hideLoading(context){
		context.commit("hideLoading");
	}
};

const getters={
	headerShow:function(state){
		return state.headerShow;
	},
	loadingShow:function(state){
		return state.loadingShow;
	},
	footerShow(state){
		return state.footerShow;
	}
};

export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters
});
